<template>
  <a-layout id="components-layout-demo-custom-trigger" :style="{ height: '100vh'}">
    <a-layout-sider :trigger="null" collapsible v-model="collapsed">
      <div class="logo">
        <img src="./assets/logo.png" />
        <h1>Antd Demo</h1>
      </div>

      <a-menu @click="handleClick" theme="dark" mode="inline" :defaultSelectedKeys="['1']">
        <a-menu-item key="hotelManager/index">
          <a-icon type="user" />
          <span>首页控制台</span>
        </a-menu-item>
        <a-menu-item key="hotelManager/userManage">
          <a-icon type="user" />
          <span>用户管理</span>
        </a-menu-item>
        <a-menu-item key="hotelManager/roomMgmt">
          <a-icon type="user" />
          <span>房间信息管理</span>
        </a-menu-item>

        <a-sub-menu @click="handleClick" theme="dark" mode="inline" :defaultSelectedKeys="['1']">
          <span slot="title">
            <a-icon type="user" />订单模块
          </span>
          <a-sub-menu @click="handleClick" theme="dark" mode="inline" :defaultSelectedKeys="['1']">
            <span slot="title">
              <a-icon type="user" />订单状态查询
            </span>
            <a-menu-item key="hotelManager/s0">未审核订单</a-menu-item>
            <a-menu-item key="hotelManager/s1">已审核订单</a-menu-item>
            <a-menu-item key="hotelManager/s2">已入住订单</a-menu-item>
            <a-menu-item key="hotelManager/s3">已完成订单</a-menu-item>
          </a-sub-menu>
          <a-menu-item key="hotelManager/historyRecord">历史记录查询</a-menu-item>
          <a-menu-item key="hotelManager/incomeStatistics">收入汇总</a-menu-item>
          <a-menu-item key="hotelManager/roomSource">房间资源</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="hotelManager/adminManage">
          <a-icon type="user" />
          <span>管理员管理</span>
        </a-menu-item>

        <a-menu-item key="hotelManager/getOrdersExcels">
          <a-icon type="user" />
          <span>下载订单</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
          style="float:left; padding: 0 ;margin: 15px"
        />

        <el-button round @click="dialogVisible  = true" style="float:right;margin: 15px">
          <span class="el-dropdown-link">
            <!-- <img class="user-logo" src="../../../static/img/img.jpg"> -->
            {{username}}
          </span>
        </el-button>
        <el-dialog title="确定退出？ " :visible.sync="dialogVisible" width="30%" center>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="dialogVisible = false">取 消</el-button>
            <el-button type="text" @click="handleClose">确定</el-button>
          </div>
        </el-dialog>
      </a-layout-header>

      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>


<script>
export default {
  name: "App",
  data() {
    return {
      collapsed: false,
      dialogVisible: false,
      innerVisible: false
    };
  },
  components: {},
  computed: {
    username() {
      //let username = sessionStorage.getItem("login_username");
      let username = this.$store.getters.getUser;
      return username || this.name;
    },
    headerStataus() {
      return this.$store.getters.getHeaderStatus;
    }
  },
  methods: {
    handleClick(e) {
      this.$router.push("/" + e.key);
    },
    openDialog() {
      this.visible = true; // 通过data显式控制dialog
    },
    handleClose(done) {
      this.$confirm("此操作退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/ssms/logout",
            headers: {
              "Content-Type": "application/json"
            },
            responseType: "application/json",
            withCredentials: true
          })
            .then(res => {
              if (res.data.code === 0) {
                this.$store.commit("setNull");

                this.$router.push("/userView/rooms");
                this.$message({
                  type: "success",
                  message: "退出成功!"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style>
.logo img,
.logo svg {
  height: 32px;
  width: 32px;
}
.logo img,
.logo svg,
.logo h1 {
  display: inline-block;
  vertical-align: middle;
}

.logo h1 {
  color: #fff;
  font-size: 20px;
  margin: 0 0 0 12px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-weight: 600;
  vertical-align: middle;
}
.logo {
  position: relative;
  height: 32px;
  left: 0px;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: #02101f;
  margin: 16px;
}

#components-layout-demo-custom-trigger {
  height: 32px;
  background: #02101f;
  margin: 16px;
}
</style>